<template>
<div class="add-form">
 <el-dialog  :visible.sync="dialogFormVisible" :title="titleInfo.text+titleInfo.pageTitle" >
      <el-form ref="dataForm" :model="formBase" :rules="rules" size="medium" label-width="120px" label-position="left"  style="width: 80%; margin-left:10px;">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="formBase.subjectName" placeholder="请输入学科名称" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch v-model="formBase.isFrontDisplay" active-color="#39BF52"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormH">取消</el-button>
        <el-button type="primary" @click="createData">确定</el-button>
      </div>
    </el-dialog>


</div>
  
</template>

<script>
import {update, add } from '@/api/hmmm/subjects.js'
export default {
    name: 'SubjectsAdd',
    props:{
  titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
         type: Object,
      required: true
      },
  
    },

data() {
  return {
    dialogFormVisible:false,
    // 表单验证
    rules: {
        subjectName: [{
          required: true,
          message: '请输入学科名称',
          trigger: 'blur'
        }],
      }
        

  }
},
methods: {
   // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
// 子传父
itemClick(item) {
        //  通过 $emit 来向父组件发射事件（信息）,自定义事件
        this.$emit('itemclick', item)
      },

// 表单提交
createData(){
  this.$refs.dataForm.validate(async valid =>{
    if(valid) {
   this.dialogFormH()

       const data = {
            ...this.formBase
          }
          if(this.formBase.id){
            await update(data).then(()=>{
              this.$emit('newDataes',this.formBase)
               this.$message.success("操作成功！")
            })
          } else {
            await add(this.formBase).then(()=>{
              this.$emit('newDataes',this.formBase)
              this.$message.success("操作成功！")
            })
          }        
    }else {
      this.$message.error('学科名称为必填项!')
    }
 
  })
}



},


}
</script>

<style scoped lang='less'>
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-form-item--medium {
  margin-bottom: 22px;
}
.el-dialog__footer {
  text-align: center;
}
</style>
